<html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" type="text/css" href="../scratch/newcss.css" />

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
<!--    <script src="../js/jquery.js" type="text/javascript"></script>
    <script src="../js/jquery.imageLens.js" type="text/javascript"></script>-->
    <!-- Custom styles for this template -->
    <link href="navbar.css" rel="stylesheet">
    <script src="../js/mostrar.js"></script>

  </head>

  <body>

    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
                <a href="./index.html">
                <img src="../images/logo2.png" alt="als" class="img-circle"  width='100' height='100' style='margin:0em;'>
                 <!--<li><a href="../navbar-static-top/" >--> 
                 <img src="../images/letras.png" alt="als"  width='500' height='100' style='margin:0em;'>
                </a>
          </div>
          
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="../acercade.html">Acerca de</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

      <!-- Main component for a primary marketing message or call to action -->
     
      <div  class="jumbotron" style="background: rgba(255,255,255,0.5); ">
          
           <div class="row"> 
               
               
                    <div id="burbujaTexto" style=" width: 200px; height: 200px; position: relative; top:-20px; left: 330px; display: block; ">
                        <img id="imgen" src="../imagenesMascota/burbuja.png"> 
                    </div>  
                    
                    
                    <div 
                        style="position: relative; width: 150px; height: 215px; top: -140px; left: 460px;"> 
                        <canvas width="150" height="215" id="canvass"></canvas>
                        <!--<img id="pet" src="images/pet.gif"  style="width:150px;height:215px">-->
                    </div> 
               
               <div  class="col-md-8" style="left: 190px; top: -100px;">    
                        <div  class="col-md-4">
                    <!--<hoooooooooooooooldiv style="width: 190px; height: 500px; position: relative; left: 320px; toop: 200px; position: absolute; left: -610px; top: 100px;">-->                     
                        <input id="botonVerde" type="button" value="Aprende" name="aprendizaje" style="position: relative; width: 200px; height: 70px;  font-size:1.4em; "
                               onclick='location.href="../contenido/contenido.html"'/>
                        
                        </div>
                        <div  class="col-md-4">
                    <!--<div style="width: 190px; height: 500px; position: relative; left: 520px; top: 200px;position: absolute; left: -370px; top: 100px;">-->
                        <input id="botonVerde" type="button" value="Explora" style="position: relative; width: 200px; height: 70px; font-size:1.4em;" 
                               onclick='location.href="../scratch/scratch.html"'/>
                        </div>  
                        
                        <div  class="col-md-4">
                    <!--<div ;"><input id="botonVerde" type="button" value="Juega" style="width: 200px; height: 70px; position: absolute; left: -130px; top: 100px;-->
                        <input id="botonVerde" type="button" value="Prueba" style=" position: relative; width: 200px; height: 70px;  font-size:1.4em;"
                               onclick='location.href="../dragndrop/dragndrop.html"'/>
                        </div>
                    <!--</div>-->
                    <!--<div style="width: 190px; height: 500px; position: relative; left: 920px; top: 500px;">-->
                    </div>
                    <!--</div>-->    
        
                    
               
                    
                
            </div>
      </div>

    </div> <!-- /container -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
<!--    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>-->
    <script src="../js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <!--<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>-->
  <script  type="text/javascript" src="../js/dibujar.js"></script>

</body></html>
